<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        a{
            text-decoration: none;
        }
        .navigation{
            width: 100%;
            height: 100%;
            border-bottom: 1px solid #ddd;
            padding-bottom: 12px;
        }
        .title{
            font-size: 55px;
            font-weight: 500;
            margin: 5px 0px 5px 20px;
        }
        .nav-box{
            float: right;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 5px;
            padding-right: 5px;
            margin-left: 6vh;
            margin-right: 6vh;
            margin-top: 12px;
        }
        .navtxt{
            color: black;
            font-size: 20px;
            font-weight: 600;
        }
        .nav-title:hover .navtxt{
            color: rgb(144, 144, 144);
        }
        .show{
            border: 1px solid #ddd;
            border-radius: 18px;
            width: 60vh;
            height: 18vh;
            margin-top: 3vh;
            margin-bottom: 3vh;
            margin-left: 2vh;
            padding: 10px 10px 10px 10px;
        }
        .show-img{
            width: 30%;
            height: 100%;
            border-radius: 18px;
            overflow: hidden;
            background-image: url(./rcmd.png);
            background-size: 100%;
            float: left;
        }
        .show-title{
            width: 60%;
            margin-bottom: 4%;
            font-size: 3vh;
            float: left;
            margin-left: 5%;
        }
        .show-txt{
            width: 60%;
            color: #6b6b6b;
            font-size: 2vh;
            float: left;
            margin-left: 5%;
        }
        .show-more{
            float: right;
            margin-right: 8%;
        }
        .show-more-txt{
            color: black;
            font-size: 1.8vh;
        }
        .show-more-txt:hover{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="navigation">
        <span class="title">首页</span> 
        <div class="nav-box">
            <a class="nav-title" href="./form.html"><span class="navtxt">·表单页·</span></a>
        </div>
        <div class="nav-box">
            <a class="nav-title" href="./specific.html"><span class="navtxt">·详情页·</span></a>
        </div>
        <div class="nav-box">
            <a class="nav-title" href="./list.html"><span class="navtxt">·列表页·</span></a>
        </div>
        <div class="nav-box" style="border-bottom: 1.5px solid #6b6b6b;">
            <a class="nav-title"><span class="navtxt">·首页·</span></a>
        </div>
    </div>
    <div class="spec">
        <div class="show">
            <div class="show-img"></div>
            <div class="show-title">列表页面</div>
            <div class="show-txt">指某个内容类型或栏目的目录，通常在首页上点击某个信息区块的more链接进入，一般为一维列表或二维...</div>
            <div class="show-more"><a class="show-more-txt" href="./list.html">more&gt;</a></div>
        </div>
        <div class="show">
            <div class="show-img"></div>
            <div class="show-title">表单页面</div>
            <div class="show-txt">用户对主要内容类型进行新增和更新的页面...</div>
            <div class="show-more"><a class="show-more-txt" href="./form.html">more&gt;</a></div>
        </div>
    </div>
</body>
</html>